<!-- 横向导航栏 -->
<template>
    <Menu mode="horizontal" :active-name="activeName" class="horizontal_menu" @on-select="selectMenu">
        <MenuItem v-for="item in props.menuList" :name="item.router">
            <Icon :type="item.icon" />
            {{ item.name }}
        </MenuItem>
    </Menu>
</template>

<script setup>
import { ref } from 'vue';
import { navTabStore } from '@/store/navTab';
const props = defineProps({
    menuList: {
        type: Array
    }
});

const emit = defineEmits('changeMenu');

const { activeRouterName, changeActiveRouterName } = navTabStore();

const activeName = ref(activeRouterName);

/**
 * 切换菜单
 * @param val 切换值
 */
const selectMenu = (val) => {
  activeName.value = val;
  changeActiveRouterName(val)
  emit('changeMenu', val)
}

</script>
<style scoped lang="scss">
.horizontal_menu {
    height: 48px;
    line-height: 48px;
    
}
.ivu-menu-horizontal.ivu-menu-light:after {
    display: none;
}
</style>
